<template>
  <div class="member-list">
    <!--    产品信息-销售产品-->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Button :type="'primary'" @click="handleAdd">新增</Button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '参数设置',
              ifShow: !!record['enable'],
              onClick: handleSetting.bind(null),
            },
            {
              color: record['enable'] ? 'error' : '',
              label: record['enable'] ? '下架' : '上架',
              onClick: handleEnable.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>

    <SpuCategoryModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script setup lang="ts">
  import { Button } from 'ant-design-vue';
  import SpuCategoryModal from './modal.vue';
  import { useModal } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import { tableColumns, tableFormSchema } from './data';
  import { BasicTable, useTable, TableAction } from '@/components/Table';

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    // api: '',
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    actionColumn: {
      width: 250,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const { createConfirm } = useMessage();
  const [registerModal, { openModal, closeModal }] = useModal();

  function handleSetting() {}
  function handleEnable(record: any) {
    const { id, enable } = record || {};
    const ifEnable = !!enable;
    createConfirm({
      title: '提示',
      iconType: 'warning',
      content: `是否确认${ifEnable ? '下架' : '上架'}？`,
      onOk: () => {
        console.log('id......', id);
      },
    });
  }
  function handleEdit(record: any) {
    openModal(true, {
      record,
      ifUpdate: true,
    });
  }
  function handleAdd() {
    openModal(true, {
      ifUpdate: false,
    });
  }
  function handleSuccess() {
    closeModal();
    reload();
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
